<template>
    <div>
        <iframe @load="iframeLoad" frameborder=0 ref="ascframe" :height="height" :src="url"
                :width="width"
                scrolling=auto></iframe>
    </div>
</template>

<script>
    export default {
        name: "asc-base",
        data() {
            return {
                url: process.env.ASC_ROOT + this.src,  // 默认地址
                messageData: [Array]
            }
        },
        methods: {
            iframeLoad() {
                this.$refs.ascframe.contentWindow.postMessage(this.selected, "*");
            },
            messageListener(messageEvent) {
                console.log("ascbase:get message:==="+messageEvent.data)
                console.log(messageEvent.data)
                window.removeEventListener('message', this.messageListener, false);
                this.$emit('handle', messageEvent.data);
            },
        },
        watch: {
            src: {
                immediate: true,
                handler(val) {
                    console.log("val:===",val);
                    console.log("process.env.NODE_ENV === 'development'"+(process.env.NODE_ENV === 'development'));
                    if(process.env.NODE_ENV === 'development'){
                        this.url = "/#/mockusers";
                        console.log("this.url1:",this.url);
                    }else{
                        this.url = process.env.ASC_ROOT + val;
                        console.log("this.url2:",this.url);
                    }

                    window.addEventListener('message', this.messageListener, false);
                    if (this.$refs.ascframe) {
                        this.$refs.ascframe.src = this.url;
                    }
                }
            },
        },
        mounted() {
            //
        },
        destroyed() {
            window.removeEventListener('message', this.messageListener, false);
        },
        props: {
            height: {type: Number, default: 400},
            width: {type: Number, default: 600},
            src: String,
            handle: Function,
            selected: Array
        }
    }
</script>

<style scoped>

</style>
